<template>
  <div class="app-container">
    <SearchForm
      v-show="showSearch"
      v-model="queryParams"
      :options="[]"
      @onQuery="getList"
    >
      <template #default="{ filterForm, handleQuery }">
        <el-form-item label="点位名称">
          <el-input
            v-model="filterForm.pointName"
            style="width: 100%"
            @change="handleQuery"
          /> </el-form-item
      ></template>
    </SearchForm>
    <el-row :gutter="10" class="mb8">
      <right-toolbar
        v-model:showSearch="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>
    <Table
      ref="table"
      :auto-featch="false"
      :fetch-data="fetchData"
      :options="[]"
      :useAction="false"
    >
      <template #default>
        <el-table-column
          label="点位名称"
          align="center"
          key="pointName"
          prop="pointName"
        >
        </el-table-column>
        <el-table-column
          label="巡检人员"
          align="center"
          key="checkUser"
          prop="checkUser"
        >
        </el-table-column>
        <el-table-column
          label="检查时间"
          align="center"
          key="checkTime"
          prop="checkTime"
        >
        </el-table-column>
        <el-table-column
          label="点位状态"
          align="center"
          key="checkState"
          prop="checkState"
        />
        <el-table-column label="操作" align="center" key="cz" prop="cz">
          <template #default="{ row }">
            <el-button type="text" @click="openDialog(row)">查看</el-button>
          </template>
        </el-table-column>
      </template>
    </Table>
    <DialogVform
      :formJson="formJson"
      ref="dialogVform"
      :showButton="false"
      :title="'巡检详情'"
    ></DialogVform>
  </div>
</template>

<script setup>
import Table from "@/components/Table/index.vue";
import SearchForm from "@/components/searchForm/index";
import { apis as APIS } from "@/api/znxj/xjrw.js";
import { useAsyncData } from "@/views/hooks/useAsyncData.js";
import DialogVform from "@/components/dialogVform/index";

import formJson from "./inner.json";
const { proxy } = getCurrentInstance();
const props = defineProps({
  parentNode: {
    type: Object,
    default: () => ({}),
  },
});

const showSearch = ref(true);
const dialogVform = ref();
const table = ref();
const filterForm = ref({});
const openDialog = (row) => {
  let data = row.formData; //|| "{}";
  let json = row.formJson;
  if (data) {
    try {
      data = JSON.parse(data) || {};
    } catch (error) {
      data = {};
    }
  }
  if (json) {
    try {
      json = JSON.parse(json);
    } catch (error) {
      json = formJson;
    }
  }
  dialogVform.value.open(data, json);
};
const { fetchData, getList, queryParams } = useAsyncData({
  APIS: {
    query: APIS.sonQuery,
  },
  dialogVform,
  table,
  proxy,
  filterForm: filterForm.value,
});
watch(
  () => props.parentNode,
  (val) => {
    filterForm.value.planTaskId = val.id || null;
    getList();
  },
  {
    deep: true,
  }
);
const changeParent = (p) => {
  filterForm.value.planTaskId = p.id || null;
  getList();
};
defineExpose({
  changeParent,
});
</script>

<style lang="scss" scoped></style>
